<template>
  <div class="homeWrapper">
    <el-container>
      <el-header class="header">
        <homeHeader></homeHeader>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <homeMenu></homeMenu>
        </el-aside>
        <el-main>
          <homeTab></homeTab>
            <div class="formStyle">
              <keep-alive>
                <router-view/>
              </keep-alive>
            </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import homeMenu from '@/components/home/homeMenu/homeMenu'
import homeHeader from '@/components/home/homeHeader/homeHeader'
import homeTab from '@/components/home/homeTab/homeTab'

export default {
  name: 'home',
  components: {
    homeMenu,
    homeHeader,
    homeTab
  }
}
</script>

<style scoped>
  .homeWrapper{
    width: 100%;
    height: 100%;
  }
  .homeWrapper>.el-container{
    width: 100%;
    height: 100%;
  }
  .formStyle{
    width: 100%;
  }
  .header{
    background: #eee;
  }
</style>

<style>
  /*style for all form in */
  .formWrapper{
    width: 100%;
  }
  .el-aside::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
  }
  .el-aside::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    background: #409eff;
  }
  .el-aside::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
  }
  .el-popover{
    min-width: 0;
  }
</style>
